;(function () { 
	var vueAddr = {} 
	vueAddr.install = function (Vue,options) { 
		Vue.directive('addr', { 
			update:function(value){
				var self = this;
				this.Fun = function(){}
				if(value && typeof value == 'function'){
					this.Fun = value;					
				}
				
				this.dom = '<div class="box_btn">'+
								'<span id="close">取消</span>'+
								'<span id="determine">确定</span>'+
							'</div>'+
							'<div id="box">'+
								'<div class="box_info">'+
									'<div>'+
										'<ul id="shen"></ul>'+
										'<div class="border"></div>'+
									'</div>'+
									'<div>'+
										'<ul id="city"></ul>'+
										'<div class="border"></div>'+
									'</div>'+
									'<div>'+
										'<ul id="area"></ul>'+
										'<div class="border"></div>'+
									'</div>'+
								'</div>'+
							'</div>';		//先定义要加到html里面的dom结构
				this.body = document.body;		//获取到body
				this.index = 0;					//初始化index默认值
				this.el.addEventListener('touchstart',function(){
					self.inputClick();			//input点击的时候触发inputClick方法
				},false);
			},
			inputClick:function(){
				var className = document.getElementsByClassName('dataAddr');
				if(className.length<=0){			//只有当当前页面上面没有地区选择的时候才添加，也就是说一个页面上面不能同时存在两个或者以上
					var self = this;				
					var div = document.createElement('div');		
					div.className = 'dataAddr';
					div.innerHTML = this.dom;
					this.body.appendChild(div)				//新建div元素为这个元素添加class并且把dom添加进去然后再添加到body里面
					this.shen = document.getElementById('shen');
					this.city = document.getElementById('city');
					this.qu = document.getElementById('area');			//添加进去之后就可以获取到省、市、区的ul结构
					this.shen.index = 0;
					this.city.index = 0;
					this.qu.index = 0;							//初始化当前省、市、区的index值
					this.box = document.getElementById('box');
					this.boxHeight = box.offsetHeight;
					this.close = document.getElementById('close');
					this.determine = document.getElementById('determine');
					this.borderTop = document.getElementsByClassName('border')[0].offsetTop;
					this.shenStart = this.borderTop;				
					this.shenResult = this.borderTop;
					this.cityStart = this.borderTop;
					this.cityResult = this.borderTop;
					this.quStart = this.borderTop;
					this.quResult = this.borderTop;				//分别设置省、市、区鼠标移上和离开的值以便下次再移动的时候不会出错				
					this.cityArr = null;
					this.box.parentNode.style.marginBottom = 0+'px';
					self.close.addEventListener('touchstart',function(){
						this.parentNode.parentNode.style.marginBottom = -self.boxHeight+'px';
						var $this = this.parentNode.parentNode;
						setTimeout(function(){
							self.body.removeChild($this);
						},150);
					});
					
					self.determine.addEventListener('touchstart',function(){		//点击确定的时候用当前获取到当前省、市、区下面当前的index找到对应的文字填充到input里面，并让当前的选框消失
						
						var shenIndex = self.shen.index;
						var shiIndex = self.city.index;
						var quIndex = self.qu.index;
						var shenTxt = self.shen.getElementsByTagName('li')[shenIndex].innerHTML;
						var shiTxt = self.city.getElementsByTagName('li')[shiIndex].innerHTML;
						var quTxt = self.qu.getElementsByTagName('li')[quIndex].innerHTML;
						var add = shenTxt +' '+shiTxt+' '+quTxt;
						self.el.value = add;
//						self.Fun({
//							province:shenTxt,
//							city:shiTxt,
//							area:quTxt
//						});		//点击确定调用传递过来的参数
						this.parentNode.parentNode.style.marginBottom = -self.boxHeight+'px';
						var $this = this.parentNode.parentNode;
						setTimeout(function(){
							self.body.removeChild($this);
						},150);
					});
			
					this.ajaxFun('add.json',function(data){	//调用ajaxFun方法，传递一个json路径和成功后的回调函数
						
						for(var i=0;i<data.length;i++){
							var dom = document.createElement('li');
							dom.innerHTML = data[i].name;
							dom.index = i;
							self.shen.appendChild(dom);
						}	
						self.cityFun(0,data[0].city);		//默认现在当前省下面的第一个市，执行cityFun方法
						self.shen.style.transform = 'translate3d(0,'+self.borderTop+'px,0)';
						self.city.style.transform = 'translate3d(0,'+self.borderTop+'px,0)';
						self.qu.style.transform = 'translate3d(0,'+self.borderTop+'px,0)';
						self.shen.style.webkitTransform = 'translate3d(0,'+self.borderTop+'px,0)';
						self.city.style.webkitTransform = 'translate3d(0,'+self.borderTop+'px,0)';
						self.qu.style.webkitTransform = 'translate3d(0,'+self.borderTop+'px,0)';		//控制当前省市区第一个的位置是在盒子的中间
						
						self.shen.addEventListener('touchstart',function(e){	
							self.shenStart = self.touchStart(this,self.shenStart,e);
						});
						
						self.shen.addEventListener('touchmove',function(e){
							e.preventDefault();
							var callBack = self.touchMove(this,self.shenResult,self.shenStart,e);
							self.shenStart = callBack.start;							
							self.shenResult = callBack.result;
						});
						
						self.shen.addEventListener('touchend',function(){			
							var callBack = self.touchEnd(self.shen.index,this,self.shenResult,data,'shen');
							self.shenResult = callBack.result;
							self.shen.index = callBack.index;
						});
						
						self.shen.addEventListener('touchcancel',function(){
							var callBack = self.touchEnd(self.shen.index,this,self.shenResult,data,'shen');
							self.shenResult = callBack.result;
							self.shen.index = callBack.index;
						});	//省级手指移上、移动、离开触发一系列方法
						
						self.qu.addEventListener('touchstart',function(e){	
							self.quStart = self.touchStart(this,self.quStart,e);
						});
						
						self.qu.addEventListener('touchmove',function(e){
							e.preventDefault();
							var callBack = self.touchMove(this,self.quResult,self.quStart,e);
							self.quStart = callBack.start;
							self.quResult = callBack.result;
						});
						
						self.qu.addEventListener('touchend',function(){			
							var callBack = self.touchEnd(self.qu.index,this,self.quResult,data,'qu');
							self.quResult = callBack.result;
							self.qu.index = callBack.index;
						});					
						self.qu.addEventListener('touchcancel',function(){			
							var callBack = self.touchEnd(self.qu.index,this,self.quResult,data,'qu');
							self.quResult = callBack.result;
							self.qu.index = callBack.index;
						});		//区级手指移上、移动、离开触发一系列方法			
						
						self.city.addEventListener('touchstart',function(e){
							self.cityStart = self.touchStart(this,self.cityStart,e);
						});
										
						self.city.addEventListener('touchmove',function(e){
							e.preventDefault();
							var callBack = self.touchMove(this,self.cityResult,self.cityStart,e);
							self.cityStart = callBack.start;
							self.cityResult = callBack.result;
						});
						
						self.city.addEventListener('touchend',function(){			
							var callBack = self.touchEnd(self.city.index,this,self.cityResult,data,'city');
							self.cityResult = callBack.result;
							self.city.index = callBack.index;
						});
						self.city.addEventListener('touchcancel',function(){
							self.cityResult = self.touchEnd(self.city.index,this,self.cityResult,data,'city');
						});	//市级手指移上、移动、离开触发一系列方法
					});
				}

			},
		
			ajaxFun:function(path,callBack){	
				//			var self = this;
				//			var xhr = new XMLHttpRequest();
				//			xhr.open('GET',path);
				//			xhr.onreadystatechange = function(){
				//				if(xhr.status == 200 && xhr.readyState == 4){
				//					var data = JSON.parse(xhr.response);
				//					callBack(data);		//请求成功获取数据之后执行回调函数把获取到的内容转换成json对象传递回去
				//				}
				//			}
				//			xhr.send(null);
				var data = require('./add.json');
				callBack(data);		//请求成功获取数据之后执行回调函数把获取到的内容转换成json对象传递回去
			},	
		
			touchStart:function(self,start,e){			//手指按下移除过渡效果获取到手指当前位置并返回start值
				self.style.transition = '';
				self.style.webkitTransition = '';
				start = e.changedTouches[0].pageY;
				return start;
			},

			touchMove:function(self,result,start,e){
				var height = self.offsetHeight;
			
				result = result + e.changedTouches[0].pageY - start;

				start = e.changedTouches[0].pageY;
				if(result >= this.borderTop){
					
					result--;
				}else if(result <= -(height - this.borderTop*2)){
					
					result++;
				}
				self.style.transform = 'translate3d(0,'+result+'px,0)';
				self.style.webkitTransform = 'translate3d(0,'+result+'px,0)';
				return {
					result:result,
					start:start
				};
			},
			
			touchEnd:function(index,self,result,data,type){
				var height = self.offsetHeight;			//获取到当前ul的高度
			
				var listHeight = parseFloat(window.getComputedStyle(document.getElementById('shen').getElementsByTagName('li')[0], null).height);
				
				if(result >= this.borderTop){			
					result = this.borderTop;
					
				}else if(result <= -(height - this.boxHeight/2)){
					
					result = -(height - this.boxHeight/2);
					index = self.getElementsByTagName('li').length-1;
					
				}else{
				
					index = Math.round(Math.abs(result - this.boxHeight/2 + listHeight)/listHeight);
				
					if(index > self.getElementsByTagName('li').length){
						index = self.getElementsByTagName('li').length-1;
					}
					result = -index*listHeight + this.borderTop;	
				}
				self.index = index;
				self.style.transition = 'all .2s';
				self.style.transform = 'translate3d(0,'+result+'px,0)';
				self.style.webkitTransition = 'all .2s';
				self.style.webkitTransform = 'translate3d(0,'+result+'px,0)';
				
				if(type == 'shen'){
					this.cityArr = data[index].city;
					this.cityFun(index,this.cityArr);
					this.cityResult = this.borderTop;

					this.quResult = this.borderTop;
					this.city.style.transform = 'translate3d(0,'+this.borderTop+'px,0)';
					this.qu.style.transform = 'translate3d(0,'+this.borderTop+'px,0)';
					this.city.style.webkitTransform = 'translate3d(0,'+this.borderTop+'px,0)';
					this.qu.style.webkitTransform = 'translate3d(0,'+this.borderTop+'px,0)';
				}else if(type == 'city'){				
					if(this.cityArr == null){
					
						this.cityArr = data[0].city;
					}
					this.quResult = this.borderTop;
					this.quFun(this.cityArr[index].area);
					this.qu.style.transform = 'translate3d(0,'+this.borderTop+'px,0)';
					this.qu.style.webkitTransform = 'translate3d(0,'+this.borderTop+'px,0)';					
				}
				return {
					result:result,
					index:index
				};
			},
						
			cityFun:function(index,data){
				this.city.innerHTML = '';
				for(var i=0;i<data.length;i++){
					var dom = document.createElement('li');
					dom.innerHTML = data[i].name;
					dom.index = i;
					this.city.appendChild(dom);
				}
				this.quFun(data[0].area);
			},		
			quFun:function (data){
				this.qu.innerHTML = '';
				for(var i=0;i<data.length;i++){
					var dom = document.createElement('li');
					dom.innerHTML = data[i];
					dom.index = i;
					this.qu.appendChild(dom);
				}
			}				
		});
	} 
	if (typeof exports == "object") {
		module.exports = vueAddr;
	} else if (typeof define == "function" && define.amd) {
		define([], function(){ 
			return vueAddr ;
		})
	} else if (window.Vue) { 
		window.vueAddr = vueAddr;
		Vue.use(vueAddr);
	}
})();
